<!--
 * @Description:
 * @Author: yunChuangShiTai
 * @Date: 2024-02-26 16:44:30
 * @LastEditTime: 2024-03-26 17:05:28
 * @LastEditors: CAI 2246513771@qq.com
-->
<template>
  <div class="dashboard-container">
    <el-dialog :title="type == 'create' ? '添加系统设置' : '修改系统设置'" v-model="visible" width="800px">
      <el-form :model="form" label-width="130px" size="large">
        <el-form-item label="参数名称">
          <el-input placeholder="请输入参数名称" style="width: 500px" v-model="form.name"></el-input>
        </el-form-item>

        <el-form-item label="参数键名">
          <el-input placeholder="请输入参数键名" style="width: 500px" v-model="form.keyName"></el-input>
        </el-form-item>

        <el-form-item label="参数键值">
          <el-input placeholder="请输入参数键值" style="width: 500px" v-model="form.keyValue"></el-input>
        </el-form-item>

        <el-form-item label="备注">
          <el-input placeholder="请输入备注" style="width: 500px" v-model="form.notes"></el-input>
        </el-form-item>

        <el-form-item label="是否系统内置">
          <el-select placeholder="选择是否系统内置" v-model="form.built_in">
            <el-option
              :key="item.value"
              :label="item.name"
              :value="item.label"
              v-for="item in built_inList"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div class="flexSB">
        <div></div>
        <div class="dialog-footer">
          <el-button @click="closeBox" style="margin-right:0">取 消</el-button>
          <el-button @click="submit" type="primary" :loading="submitComplete">确 定</el-button>
        </div>
      </div>
    </el-dialog>
    <div>
      <!-- <el-input style="width: 250px" placeholder="请输入内容" v-model="input4">
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>-->
      <!-- <span class="fs-15">参数名称</span> -->
      <el-input
        clearable
        placeholder="请输入参数名称"
        class="marginBottom"
        style="width: 200px; margin: 0 10px"
        v-model="querys.system"
      ></el-input>
      <!-- <span class="fs-15">参数键名</span> -->
      <el-input
        clearable
        placeholder="请输入参数键名"
        class="marginBottom"
        style="width: 200px; margin: 0 "
        v-model="querys.operate"
      ></el-input>
      <!-- <span class="fs-15">系统内置 </span> -->
      <el-input
        clearable
        placeholder="请输入系统内置"
        class="marginBottom"
        style="width: 200px; margin: 0 10px"
        v-model="querys.type"
      ></el-input>
      <!-- <span class="fs-15">创建时间</span> -->
      <el-date-picker
        v-model="querys.time"
        type="datetimerange"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :default-time="['12:00:00']"
        style="width: 250px;"
      ></el-date-picker>
      <el-button class="marginLeft" type="primary" :icon="Search">搜索</el-button>
      <el-button class="marginLeft" :icon="Refresh" @click="reset">重置</el-button>

      <el-button type="primary" size :icon="Plus" plain @click="visible = true;type = 'create'">新增</el-button>
      <!-- <el-button type="success" size="small" icon="el-icon-edit" plain>修改</el-button> -->
      <!-- <el-button type="danger" size="small" icon="el-icon-delete" plain>删除</el-button> -->
      <el-button type="warning" :icon="Download" plain>导出</el-button>
      <el-button type="danger" :icon="Refresh" @click="reset" plain>刷新缓存</el-button>
    </div>

    <div class="marginTop"></div>

    <div>
      <el-card body-style="padding:10px" class="marginTop">
        <el-table :data="tableData" max-height="550px" style="width: 100%">
          <el-table-column label="参数主键" prop="id"></el-table-column>
          <el-table-column label="参数名称" prop="name"></el-table-column>
          <el-table-column label="参数键名" prop="keyName"></el-table-column>
          <el-table-column label="参数键值" prop="keyValue"></el-table-column>
          <el-table-column label="系统内置" prop>
            <template #default="scope">
              <el-tag type="primary" v-if="scope.row.built_in">是</el-tag>
              <el-tag type="info" v-else>否</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="备注" prop="notes"></el-table-column>
          <el-table-column label="创建时间" prop="time"></el-table-column>
          <el-table-column label="操作" prop>
            <template #default="scope">
              <el-button
                style="margin-left: 10px;"
                type="primary"
                @click="visible = true;type = 'update';form = scope.row"
              >修改</el-button>

              <el-popconfirm @confirm="deleteFun(scope.row.id)" title="确定要删除这个数据吗？">
                <template #reference>
                  <el-button style="margin-left: 10px;" type="danger">删除</el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { Search, Refresh, Plus, Download } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
let querys = ref({
  system: '',
  operate: '',
  type: '',
  state: '',
  time: '',
})

let form = ref({
  name: '',
  keyName: '',
  keyValue: '',
  notes: '',
  built_in: '',
})
let type = ref('create')
let visible = ref(false)

let submitComplete = ref(false)
let built_inList = ref([
  {
    label: 0,
    name: '否',
  },
  {
    label: 1,
    name: '是',
  },
])

let tableData = ref([
  {
    id: 1,
    name: '主框架页-默认皮肤样式名称',
    keyName: 'sys.index.skinName',
    keyValue: 'skin.blue',
    notes: '蓝色skin-blue、绿色skin-gr...',
    time: '2022-10-19 21:37:36',
    built_in: 0,
  },
  {
    id: 19,
    name: '用户管理-账号初始密码',
    keyName: 'sys.user.initPassword',
    keyValue: 'AS001@zhhw!',
    notes: '初始化密码AS001@zzw!',
    time: '2022-10-19 21:47:16',
    built_in: 0,
  },
])

function reset() {
  querys.value = {
    system: '',
    operate: '',
    type: '',
    state: '',
    time: '',
  }
}

function initForm() {
  form.value = {
    name: '',
    keyName: '',
    keyValue: '',
    notes: '',
    name: '',
    built_in: '',
  }
}
function closeBox() {
  visible.value = false
  initForm()
}

function deleteFun(id) {
  const indexToRemove = tableData.value.findIndex((item) => item.id === id)
  if (indexToRemove !== -1) {
    tableData.value.splice(indexToRemove, 1)
  }
}

function submit() {
  if (submitComplete.value) return
  submitComplete.value = true
  if (
    !(
      form.value.name &&
      form.value.keyName &&
      form.value.keyValue &&
      form.value.notes &&
      form.value.built_in != null
    )
  ) {
    ElMessage({
      message: '请将信息填写完整！',
      type: 'warning',
    })

    submitComplete.value = false
    return
  }
  if (type.value == 'create') {
    //delete this.form.clientsNo

    submitComplete.value = false
    ElMessage({
      message: '添加成功',
      type: 'success',
    })
    visible.value = false
    if (tableData.value.length) {
      form.value.id = tableData.value[tableData.value.length - 1].id + 1
    } else {
      form.value.id = 1
    }
    tableData.value.push(form.value)
    initForm()
  } else {
    submitComplete.value = false
    ElMessage({
      message: '修改成功',
      type: 'success',
    })
    visible.value = false
    initForm()
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

::v-deep .el-table th.el-table__cell {
  background-color: #f8f8f9 !important;
}

::v-deep .el-table thead {
  color: #515a6e;
}

.dialog-footer {
  width: 200px;
}
</style>
